<template>
    <!-- 内容区域 -->
    <div>
        <div class="recommendContainer" ref="recommendContainer">
            <div v-for="item in newModuleRankDatas" :key="item.moduleInfo.id">
                <h6>{{ item.moduleInfo.displayName }}</h6>
                <div class="recommendListX">
                    <ul class="recommendContent">
                        <li v-for="itemX in item.albumBriefDetailInfos[0]" :key="itemX.id"
                            @click="changePlayStatus(itemX.id)">
                            <VanImage width="110" height="110" :src="itemX.albumInfo.cover">
                            </VanImage>
                            <div class="recommendImageFooter">
                                <Icon class="recommendIcon" :name="IconName" size="6px"></Icon>
                                <span>
                                    {{
                                        `${itemX.statCountInfo.playCount / 100000000 > 1
                                            ? (itemX.statCountInfo.playCount /
                                                100000000).toFixed(2) + '亿' : (itemX.statCountInfo.playCount /
                                                    10000).toFixed(2) + '万'}` }}
                                </span>
                            </div>
                            <p>{{ itemX.albumInfo.title }}</p>
                        </li>
                    </ul>
                </div>
                <div class="recommendListY">
                    <ul class="recommendListContainer">
                        <li v-for="itemY in item.albumBriefDetailInfos[1]" :key="itemY.id"
                            @click="changePlayStatus(itemY.id)">
                            <VanImage class="recommendListImage" width="100px" height="100px" :src="itemY.albumInfo.cover">
                            </VanImage>
                            <div class="recommendListText">
                                <p class="text1">{{ itemY.albumInfo.title }}</p>
                                <p class="text2">{{ itemY.albumInfo.subTitle }}</p>
                                <div class="text3">
                                    <span class="bofang">
                                        <Icon class="recommendListIcon" name="audio" size="6px"></Icon>
                                        <span>{{ itemY.statCountInfo.trackCount }}</span>
                                    </span>
                                    <span class="zanting">
                                        <Icon class="recommendListIcon" name="audio" size="6px"></Icon>
                                        <span>
                                            {{
                                                `${itemY.statCountInfo.playCount / 100000000 > 1
                                                    ? (itemY.statCountInfo.playCount /
                                                        100000000).toFixed(2) + '亿' : (itemY.statCountInfo.playCount /
                                                            10000).toFixed(2) + '万'}` }}
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 更多推荐 -->
            <div class="recommendListY">
                <h6>热门推荐</h6>
                <ul class="recommendListContainer">
                    <li v-for="itemY in moreList" :key="itemY.data.id" @click="changePlayStatus(itemY.data.id)">
                        <VanImage class="recommendListImage" width="100px" height="100px"
                            :src="'https://imagev2.xmcdn.com/' + itemY.data.albumInfo.cover">
                        </VanImage>
                        <div class="recommendListText">
                            <p class="text1">{{ itemY.data.albumInfo.title }}</p>
                            <p class="text2">{{ itemY.data.albumInfo.subTitle }}</p>
                            <div class="text3">
                                <span class="bofang">
                                    <Icon class="recommendListIcon" name="audio" size="6px"></Icon>
                                    <span>{{ itemY.data.statCountInfo.trackCount }}</span>
                                </span>
                                <span class="zanting">
                                    <Icon class="recommendListIcon" name="audio" size="6px"></Icon>
                                    <span>
                                        {{
                                            `${itemY.data.statCountInfo.playCount / 100000000 > 1
                                                ? (itemY.data.statCountInfo.playCount /
                                                    100000000).toFixed(2) + '亿' : (itemY.data.statCountInfo.playCount /
                                                        10000).toFixed(2) + '万'}` }}
                                    </span>
                                </span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 更多推荐 -->
    <div class="recommendListY">
        <h6>热门推荐</h6>
        <ul class="recommendListContainer">
            <li v-for="itemY in moreList" :key="itemY.data.id">
                <VanImage class="recommendListImage" width="100px" height="100px"
                    :src="'https://imagev2.xmcdn.com/' + itemY.data.albumInfo.cover">
                </VanImage>
                <div class="recommendListText">
                    <p class="text1">{{ itemY.data.albumInfo.title }}</p>
                    <p class="text2">{{ itemY.data.albumInfo.subTitle }}</p>
                    <div class="text3">
                        <span class="bofang">
                            <Icon class="recommendListIcon" name="audio" size="6px"></Icon>
                            <span>{{ itemY.data.statCountInfo.trackCount }}</span>
                        </span>
                        <span class="zanting">
                            <Icon class="recommendListIcon" name="audio" size="6px"></Icon>
                            <span>
                                {{
                                    `${itemY.data.statCountInfo.playCount / 100000000 > 1
                                        ? (
                                            itemY.data.statCountInfo.playCount / 100000000
                                        ).toFixed(2) + "亿"
                                        : (
                                            itemY.data.statCountInfo.playCount / 10000
                                        ).toFixed(2) + "万"
                                    }`
                                }}
                            </span>
                        </span>
                    </div>
                </div>
            </li>
        </ul>
    </div>


    <div>
        <div class="footer">
            <VanImage class="firstImage"
                src="https://imagev2.xmcdn.com/storages/2165-audiofreehighqps/52/6D/GKwRIDoF6Ml9AAESnAEaI6xF.png!magick=webp">
            </VanImage>
            <VanImage class="secondImage"
                src="https://imagev2.xmcdn.com/storages/72b6-audiofreehighqps/30/CE/GMCoOR8H3gffAAAQWAIAHhDF.png!magick=webp">
            </VanImage>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { moduleRankDatas } from "@/api/audioVideo/model/youshengshuModel";
import { getSecondCategoeyListApi } from "@/api/audioVideo/youshengshu";
export default defineComponent({
    name: "moduleRankDatas",
});
</script>
<script lang="ts" setup>

import { ref, onMounted, watch, onUnmounted } from 'vue';
import { useRouter, useRoute } from "vue-router"
import { Icon, Image as VanImage } from 'vant';
import { getMoreApi } from "@/api/audioVideo/youshengshu"
// 创建路由实例对象
const router = useRouter()
const route = useRoute()

const iconRef = ref()
// 推荐图片中  暂停、播放按钮
const IconName = ref<string>("play")
const recommendContainer = ref()
// 记录点击播放的是哪一个
const clickIndex = ref<number>(0)
const moreList = ref<Array<any>>([])
// 模块对应的数据列表
const moduleRankDatas = ref<moduleRankDatas>([])
const newModuleRankDatas = ref<any>([])

// 切换播放、暂停状态
const changePlayStatus = (id: number) => {
    router.push({
        name: "Detail",
        params: {
            id: id,
        },
    });
};

// 获取推荐模块及以下相关数据
const getmoduleRankDatas = async () => {
    const result = await getSecondCategoeyListApi(
        route.params.moduleKey as string
    );
    moduleRankDatas.value = result.moduleContent.moduleRankDatas;
    newModuleRankDatas.value = moduleRankDatas.value.map((item) => {
        if (item.albumBriefDetailInfos.length > 3) {
            let moduleRankDatasX = [];
            let moduleRankDatasY = [];
            // // 当模块数据大于3条时，截取  将截取拿到的数据作为Y轴排列展示的数据    数据的splice删除的方法：当只有一个参数时，表示保留几个(该方法影响原数组)，返回值 是删除的数据组成的数据，正好是需要在Y轴展示的数据

            moduleRankDatasY = item.albumBriefDetailInfos.splice(3);

            moduleRankDatasX = item.albumBriefDetailInfos;

            // console.log(moduleRankDatasX, 'moduleRankDatasXXXXXXXXXXXXXXXXXXX')
            // console.log(moduleRankDatasY, 'moduleRankDatasYYYYYYYYYYYYYYYYyyy')
            // console.log(moduleRankDatas, 'moduleRankDatas');
            return {
                moduleInfo: item.moduleInfo,
                albumBriefDetailInfos: [moduleRankDatasX, moduleRankDatasY],
            };
        } else {
            let moduleRankDatasX;
            moduleRankDatasX = item.albumBriefDetailInfos;

            return {
                moduleInfo: item.moduleInfo,
                albumBriefDetailInfos: [moduleRankDatasX],
            };
        }
    });
    console.log(newModuleRankDatas.value, "newModuleRankDatas.value");
};
// 获取更多推荐
const getMoreList = async () => {
    if (route.params.moduleKey) {
        console.log(route.params.moduleKey, 'route.params.moduleKey');
        const res = await getMoreApi(route.params.moduleKey as string)
        moreList.value = [...moreList.value, ...res.materials]
    }
};

// 监听动态路由的改变，每次params参数改变都重新请求
watch(route, () => {
    getmoduleRankDatas();

    // 每次路由切换，清空更多推荐列表
    moreList.value = [];
    getMoreList();
});

onMounted(() => {
    getmoduleRankDatas();
    getMoreList();
    // 监听滚动
    window.addEventListener('scroll', handleScroll, true)
})
// 销毁监听  (坑：移除监听事件时加true否则销毁不成功)
onUnmounted(() => {
    window.removeEventListener("scroll", handleScroll, true)
})
// 滚动操作
const handleScroll = () => {
    // 滚动条 尖尖到顶部的距离
    const scrollTop = document.documentElement.scrollTop
    //变量windowHeight是可视区的高度
    const windowHeight = document.documentElement.clientHeight;
    //变量scrollHeight是滚动条的总高度
    const scrollHeight = document.documentElement.scrollHeight
    if (scrollTop + windowHeight > scrollHeight - 60) {
        getMoreList()
    }
};
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.recommendContainer {
    display: flex;
    flex-direction: column;
    position: relative;

    h6 {
        margin-top: 20px;
        margin-left: 15px;
        font-size: 18px;
        color: rgb(44, 44, 44);
    }

    .recommendListX {
        .recommendContent {
            display: flex;
            justify-content: space-evenly;
            margin: 15px;

            li {
                position: relative;

                .recommendImageFooter {
                    display: flex;
                    align-items: center;
                    position: absolute;
                    left: 3px;
                    bottom: 38px;
                    font-size: 14px;

                    .recommendIcon {
                        width: 16px;
                        height: 16px;
                        line-height: 16px;
                        text-align: center;
                        font-size: 10px;
                        border-radius: 50%;
                        border: 1px solid rgba(232, 230, 230, 0.5);
                        background-color: rgba(48, 48, 48, 0.429);
                        color: white;
                    }

                    span {
                        color: white;
                        display: inline-block;
                        margin-left: 6px;
                    }
                }

                p {
                    margin: 0;
                    padding: 0;
                    width: 110px;
                    font-size: 12px;
                    /* 设置高度是行高的倍数，防止文本露出一半 */
                    line-height: 14px;
                    /* 旧版弹性盒 */
                    display: -webkit-box;
                    /* 弹性盒子元素垂直排列 */
                    -webkit-box-orient: vertical;
                    /* 控制要显示的行数 */
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
            }
        }
    }

    .recommendListY {
        margin: 0px 15px;

        .recommendListContainer {
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            flex-grow: 0;

            li {
                display: flex;
                justify-content: flex-start;
                margin: 10px;

                .recommendListText {
                    width: 200px;
                    margin-left: 10px;
                    position: relative;

                    .text1 {
                        font-size: 14px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    .text2 {
                        margin-top: 10px;
                        font-size: 14px;
                        color: gray;
                        line-height: 14px;
                        /* 旧版弹性盒 */
                        display: -webkit-box;
                        /* 弹性盒子元素垂直排列 */
                        -webkit-box-orient: vertical;
                        /* 控制要显示的行数 */
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }

                    .text3 {
                        position: absolute;
                        bottom: 0;
                        width: 150px;
                        font-size: 12px;

                        .bofang span {
                            display: inline-block;
                            margin-left: 10px;
                        }

                        .zanting {
                            margin-left: 20px;

                            span {
                                display: inline-block;
                                margin-left: 10px;
                            }
                        }
                    }
                }
            }
        }
    }
}

.footer {
    position: relative;
    bottom: 0;

    .firstImage {
        left: 0;
        top: 0;
        position: absolute;
        width: 100vw;
        height: 180px;
    }

    .secondImage {
        position: absolute;
        width: 150px;
        height: 60px;
        top: 40px;
        left: 100px;
    }
}

// 二级导航 图片导航
.home-content {
    &.oG_ {
        overflow: hidden;
        // padding-top: 85px;
    }

    // 图片导航分类
    .xm-tomatoes {
        &.c_B {
            margin-top: 15px;
        }

        .cate-wrap {
            &.c_B {
                width: 308px;
                margin: 0 auto;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                text-align: center;

                .cate-box {
                    &.c_B {
                        -webkit-box-flex: 1;
                        -ms-flex: 1;
                        flex: 1;
                    }

                    .cate-pic {
                        &.c_B {
                            width: 34px;
                            height: 34px;
                            display: inline-block;
                        }

                        img.c_B {
                            width: 100%;
                            height: 100%;
                            border-radius: 100%;
                        }

                        img {
                            max-width: 100%;
                            border: none;
                            font-size: 10px;
                        }
                    }

                    .cate-txt.c_B {
                        font-size: 12px;
                        color: #666;
                        text-align: center;
                        height: 17px;
                        line-height: 17px;
                    }
                }

                a {
                    color: #7e8c8d;
                    text-decoration: none;
                    -webkit-backface-visibility: hidden;
                    border: none;
                    outline: 0;
                }
            }

            .cate-wrap .cate-box.c_B {
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }
        }
    }

    // 喜马拉雅 广告
    .schema-link {
        position: relative;

        .amid-banner.oG_ {
            margin: 18px 0 8px 0;
            overflow: hidden;
        }

        img {
            max-width: 100%;
            border: none;
            font-size: 10px;
        }
    }
}
</style>
